<script>
import {get_a_detail, get_q_total} from "@/middleware/interface";
import {Warning} from "@element-plus/icons-vue";
import {SHARE_PREFIX} from "@/config";
import {ElMessage} from "element-plus";

export default {
  components: {Warning},
  data() {
    return {
      centerDialogVisible: false,

      qid: "",

      answer_id: "",//弹窗的回答ID
      answer_detail: '',//弹窗的详细内容

      question: '',
      answers: [],
      limit: 50,
      total: 0,
      current: 1,

      loading: true,
    };
  },
  mounted() {
    this.qid = this.$route.query["qid"]
    if (this.qid) {
      this.getData()
    }
  },
  methods: {
    async getAnswerDetail() {
      const res = await get_a_detail({
        aid: this.answer_id
      })
      this.answer_detail = res["data"]
      this.centerDialogVisible = true
    },

    async getData() {
      const res = await get_q_total({
        offset: (this.current - 1) * this.limit,
        limit: this.limit,
        qid: this.qid,
      })
      this.question = res["data"]["question"]
      this.answers = res["data"]["answers"]
      this.total = res["data"]["total"]

      this.loading = false
    },

    getShort(date) {
      const dateObj = new Date(date);
      const year = dateObj.getFullYear();
      const month = dateObj.getMonth() + 1; // 月份从0开始，所以需要加1
      const day = dateObj.getDate();
      const hours = dateObj.getHours();
      const minutes = dateObj.getMinutes();
      const seconds = dateObj.getSeconds();
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },

    getAnswerContent(res) {
      var json_res = JSON.parse(res)
      return json_res["questions"].map(e => e.prefix).join(",")
    },

    getAnswerContentWithQuestion(res) {
      var json_res = JSON.parse(res)
      return json_res["questions"].map(e => "" + e.title + "：" + e.prefix)
    },

    showDetail(answer_id) {
      this.answer_id = answer_id
      this.getAnswerDetail()

    },

    copyShareUrl() {
      const qid = this.qid
      this.$copyText(SHARE_PREFIX + "?qid=" + qid + "&tk=" + localStorage.token).then(
          res => {
            ElMessage.success("复制分享链接成功！")
          },
          err => {
          }
      )
    }

  },
};
</script>

<template>
  <!-- 弹窗 -->
  <el-dialog
      v-model="centerDialogVisible"
      title="详细信息"
      width="40%"
      destroy-on-close
      center
      style="border-radius: 20px; min-width: 320px"
  >
    <div class="">
      <div class="flex items-center bg-gray-100 px-5 py-3 rounded-xl my-2.5">
        <div class=" w-24">问卷编号</div>
        <div class="text-black">{{ answer_detail["answer_id"] }}</div>
      </div>
      <div class="flex items-center bg-gray-100 px-5 py-3 rounded-xl my-2.5">
        <div class=" w-24">所属问题编号</div>
        <div class="text-black">{{ answer_detail["question_id"] }}</div>
      </div>
      <div class="flex items-center bg-gray-100 px-5 py-3 rounded-xl my-2.5">
        <div class=" w-24">IP地址</div>
        <div class="text-black">{{ answer_detail["ip_address"] }}</div>
      </div>
      <div class="flex items-center bg-gray-100 px-5 py-3 rounded-xl my-2.5">
        <div class=" w-24">IP归属地</div>
        <div class="text-black">{{ answer_detail["ip_location"] }}</div>
      </div>
      <div class="flex items-center bg-gray-100 px-5 py-3 rounded-xl my-2.5">
        <div class=" w-24">填写时间</div>
        <div class="text-black">{{ getShort(answer_detail["create_time"]) }}</div>
      </div>
      <div class="flex items-center bg-gray-100 px-5 py-3 rounded-xl my-2.5">
        <div class=" w-24">回答</div>
        <div class="text-black">
          <div v-for="item in getAnswerContentWithQuestion(answer_detail['content'])">
            {{ item }}
          </div>
        </div>
      </div>

    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" style="border-radius: 10px; padding: 10px 30px;" color="#2a4dd0"
                   @click="centerDialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>

  <div v-if="!qid" class="w-full flex items-center justify-center py-20">
    <el-icon class="mr-2">
      <Warning/>
    </el-icon>
    请传参
  </div>
  <div v-if="qid" v-loading="loading" class="px-3 py-3">

    <div class="w-full justify-center max-w-5xl mx-auto bg-white px-6 py-3 rounded-xl">
      <div class="flex justify-between items-start flex-wrap mb-3">
        <div>
          <div class="font-bold mr-5 mt-2 mb-1" style=" font-size: 18px;">会议收集<span class="font-bold" v-if="question['count']>0">（{{ question["count"] }}）</span>
          </div>
          <div class="mb-2 mr-3 py-1 text-sm rounded text-gray-500">创建于 {{
              getShort(question["create_time"])
            }}
          </div>
        </div>
        <div @click="copyShareUrl()"
             class="cursor-pointer select-none hover:opacity-50 flex items-center justify-center h-10 my-2 px-5 py-1.5 rounded-full bg-gray-100 text-gray-700 font-bold">
          分享数据
        </div>
      </div>
      <el-table :stripe="true" :data="answers" style="width: 100%;" :cell-style="{padding: '15px 0'}">
        <el-table-column prop="content" label="家长填写内容" min-width="210px">
          <template #default="scope">
            {{ getAnswerContent(scope.row.content) }}
          </template>
        </el-table-column>
        <el-table-column prop="answer_id" label="编号" width="70px"/>
        <el-table-column prop="create_time" label="收集时间" width="145px">
          <template #default="scope">
            {{ getShort(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="ip_address" label="IP地址" width="120px"/>
        <el-table-column prop="ip_location" label="IP归属地" width="150px"/>
        <el-table-column prop="answer_id" fixed="right" label="操作" width="55px">
          <template #default="scope">
            <div @click="showDetail(scope.row.answer_id)"
                 class="cursor-pointer select-none hover:opacity-60 text-blue-700">查看
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-center items-center mt-5 mb-4">
        <el-pagination layout="prev, pager, next" :hide-on-single-page="true" v-model:current-page="current"
                       v-model:page-size="limit" :total="total"
                       @current-change="getData()"/>
      </div>
      <div class="mt-4"></div>
    </div>
  </div>
</template>

<style scoped></style>
